<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maxinum-scale=1,user-scalable=no">
    <title>16.1手风琴折叠插件 </title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        a:focus{
            outline: none;
        }
    </style>
</head>

<body style="margin:200px;">


    <!-- <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseOne" data-toggle="collapse">第一部分链接</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    第一部分内容
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseTwo" data-toggle="collapse">第二部分链接</a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    第二部分内容
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseThree" data-toggle="collapse">第三部分链接</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    第三部分内容
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a href="#collapseFour" data-toggle="collapse">第四部分链接</a>
                </h4>
            </div>
            <div id="collapseFour" class="panel-collapse collapse">
                <div class="panel-body">
                    第四部分内容
                </div>
            </div>
        </div>
    </div> -->

   <button class="btn btn-primary" data-target="#content">Bootstrap</button>
        <div class="collapse" id="content">
            <div class="well">胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿胡一天也很帅的阿</div>
        </div>

    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script type="text/javascript">

    //   使用脚本的方式实现折叠 
        $('#collapseOne,#collapseTwo,#collapseThree,#collapseFour').collapse({
            parent : '#accordion',
            
            toggle : false,
        });

    // collapse 方法还提供了三个参数： hide,show,toggle
    $('button').on('click',function(){
        $('#content').collapse('toggle');
    })

    // 事件
    $('#content').on('show.bs.collapse',function(){
        alert('调用show方法的时候触发');
    })



    //    <div class="panel-group" id="accordion">
    //     <div class="panel panel-default">
    //         <div class="panel-heading">
    //             <h4 class="panel-title">
    //                 <!-- 设置父元素选择器 data-parent 选择其中一个折叠区 其他折叠隐藏 -->
    //                 <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分链接</a>
    //             </h4>
    //         </div>
    //         <!-- 默认隐藏 collapse  -->
    //         <div id="collapseOne" class="panel-collapse collapse">
    //             <div class="panel-body">
    //                 第一部分内容
    //             </div>
    //         </div>
    //     </div>

    //     <div class="panel panel-default">
    //         <div class="panel-heading">
    //             <h4 class="panel-title">
    //                 <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分链接</a>
    //             </h4>
    //         </div>
    //         <!-- 默认隐藏 collapse  -->
    //         <div id="collapseTwo" class="panel-collapse collapse">
    //             <div class="panel-body">
    //                 第二部分内容
    //             </div>
    //         </div>
    //     </div>

    //     <div class="panel panel-default">
    //         <div class="panel-heading">
    //             <h4 class="panel-title">
    //                 <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分链接</a>
    //             </h4>
    //         </div>
    //         <!-- 默认隐藏 collapse  -->
    //         <div id="collapseThree" class="panel-collapse collapse">
    //             <div class="panel-body">
    //                 第三部分内容
    //             </div>
    //         </div>
    //     </div>

    //     <div class="panel panel-default">
    //         <div class="panel-heading">
    //             <h4 class="panel-title">
    //                 <a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第四部分链接</a>
    //             </h4>
    //         </div>
    //         <!-- 默认隐藏 collapse  -->
    //         <div id="collapseFour" class="panel-collapse collapse">
    //             <div class="panel-body">
    //                 第四部分内容
    //             </div>
    //         </div>
    //     </div>
    // </div>

     </script>
</body>
</html>